<template>
  <div class="container block block_column">
    <a-textarea
      v-model:value="textInput"
      placeholder="请输入多行文本"
      :rows="4"
      class="textarea"
    />
    <a-button type="primary" @click="sendMsg" :disabled="textInput.length === 0"
      >发送</a-button
    >
    <MdPreview :modelValue="wsResponse" class="content-display" />
  </div>
</template>

<script setup lang="ts">
import { shallowRef, ref } from "vue";
import useNotes from "@/hooks/noteHooks";
import { MdPreview } from "md-editor-v3";

const { ask } = useNotes();

const textInput = ref<string>("");
const wsResponse = ref<string>("default");

const sendMsg = async () => {
  const { answer: { result } = {} } = await ask(textInput.value);
  wsResponse.value = result;
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box; /* 确保内边距和边框被包括在元素总宽度和高度内 */
}

.textarea {
  width: 100%;
  height: 100px; /* 高度固定为100px */
}

.content-display {
  width: 100%;
  flex-grow: 1; /* 铺满剩余高度 */
  overflow-y: auto; /* 如果内容超出，显示滚动条 */
  background-color: #f5f5f5; /* 可选：为背景添加一些颜色以便区分 */
  box-sizing: border-box; /* 确保内边距和边框被包括在元素总宽度内 */
  white-space: pre-wrap; /* 使得换行符生效 */
  word-wrap: break-word; /* 使得长单词换行 */
}
</style>
